<template>
  <div class="mui-content">
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          {{newsinfo.title}}
        </div>
      </div>
    </div>
    <div class="mui-card">
      <div class="mui-card-header mui-card-media" style='height:40vw' id='urlStyle'></div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>{{newsinfo.ptime}}</p>
          <p style="color: #333;"> {{newsinfo.digest}} </p>
        </div>
      </div>
      <div class="mui-card-footer">
        <a class="mui-card-link">点击 {{newsinfo.tcount}} 次</a>
      </div>
    </div>
    <comment-box :id='this.id'></comment-box> 
  </div>
</template>
<script>
  import { Toast ,Indicator} from "mint-ui";
  import comment from '../subcomponents/comment.vue';

  export default {
    data() {
      return {
        id: this.$route.params.id,//获取
        // id:null,
        newsinfo: {}
      };
    },
    created() {
      Indicator.open({
        text: '等等，我就要出来了...',
        spinnerType: 'fading-circle'
      });
      this.getNewsInfo();
      // this.imgUrl();
    },
    methods: {
      getNewsInfo() {
        // component: {
        //   //注册子组件的节点
        //   'comment-box': comment
        // }
        this.$http.get('https://www.apiopen.top/journalismApi').then(res => {
          if (res.body.code === 200) {
            var techObj = res.body.data.tech;
           // console.log(techObj);
            techObj.forEach(element => {
              if (element.docid == this.id) {
                this.newsinfo = element;
                this.imgUrl();
                Indicator.close();

              }
           })
          }else{
            Toast("获取新闻失败！");
          }
        }, () => {
          Toast("获取新闻失败！");
        })
      },
      imgUrl() {
        // return this.newsinfo.picInfo[0].url ;
        var urlStyle = document.getElementById('urlStyle');
        urlStyle.style.background = "url(" + this.newsinfo.picInfo[0].url +")";
        // console.log(this.newsinfo.picInfo[0].url);
      }
    },
    components: {
      'comment-box': comment
    },
  }

</script>

<style>
  body {
    background-color: #ffffff;
  }
  .newsinfo-container {

    padding: 10px;
  }

  .click {
    font-size: 14px;
  }
  #urlStyle {
    background-size: 100% 100% !important; 
  }
  .mui-content {
    background-color: #ffffff
  }
  .mui-content {
    height: 100%;
   
  }
</style>